<template>
<div>
  <el-divider content-position="center">轮播图设置</el-divider>
  <div style="text-align: right;margin-top: 30px">
    <el-upload
        class="upload-demo"
        action="http://localhost:8081/index/upload"
        :on-preview="handlePreview"
        :on-remove="handleRemove"
        :before-remove="beforeRemove"
        :on-success="handleAvatarSuccess"
        multiple
        :limit="6"
        :on-exceed="handleExceed"
        :file-list="fileList">
      <el-button size="small" type="primary">点击上传</el-button>
      <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb;上传完请刷新页面</div>
    </el-upload>
  </div>
  <el-table
      :data="tableData"
      style="width: 100%">
    <el-table-column
        prop="pid"
        label="图片id"
        width="180">
    </el-table-column>
    <el-table-column label="图片" width="150">
      <template slot-scope="{row}">
        <el-image
            style="width: 50px; height: 50px"
            :src="row.psrc"
            fit="fill"></el-image>
      </template>
    </el-table-column>
    <el-table-column
        prop="pstatus"
        label="图片是否展示">
      <template slot-scope="scope">
        <el-tag
            :type="scope.row.pstatus === '0' ? 'success' : 'danger'"
            disable-transitions>{{scope.row.pstatus === '0' ? '展示中' : '未展示'}}</el-tag>
      </template>
    </el-table-column>
    <el-table-column
        label="操作">
      <template slot-scope="scope">
        <el-button
            size="mini"
            @click="handleEdit(scope.$index, scope.row)">展示</el-button>
        <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
</div>
</template>

<script>

export default {
  name: "RotationChart",
  data() {
    return {
      tableData: [],
      fileList:[]
    }
  },
  methods:{
    handleRemove(file, fileList) {
      const index = this.fileList.findIndex(item => item === file.response.data)
      if (index !== -1){
        this.fileList.splice(index,1)
      }
    },
    handlePreview(file) {
      console.log(file);
    },
    handleExceed(files, fileList) {
      this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${ file.name }？`);
    },
    handleAvatarSuccess(res, file) {
      this.fileList.push(res.data)
      this.imageUrl = URL.createObjectURL(file.raw);
      axios({
        method:'post',
        url:'http://localhost:8081/rotation/insertRotation',
        data:{
          href: res.data
        }
      }).then(response => {
        console.log(response)
      }).catch(err => {
        console.log(err)
      })
    },
    handleEdit(index,row){
      console.log(row)
      axios({
        method:'get',
        url:`http://localhost:8081/rotation/showPicture/${row.pid}/${row.pstatus}`
      }).then(res=>{
        console.log(res)
        if (res.data.code === 0){
          this.$message({
            message: res.data.msg,
            type: 'success'
          });
          setInterval(function (){
            location.href = '/rotationChart'
          },1000)

        }else{
          this.$message.error(res.data.msg);
        }
      }).catch(err=>{
        console.log(err)
      })
    },
    handleDelete(index,row){
      console.log(row)
      axios({
        method:'get',
        url:`http://localhost:8081/rotation/deletePicture/${row.pid}`
      }).then(res=>{
        this.$message({
          message: res.data.msg,
          type: 'success'
        });
        setInterval(function (){
          location.href = '/rotationChart'
        },1000)
      }).catch(err=>{
        console.log(err)
      })
    }
  },
  mounted() {
    axios({
      method:'get',
      url:'http://localhost:8081/rotation/getRotation'
    }).then(res=>{
      console.log(res)
      this.tableData = res.data.data
    }).catch(err=>{
      console.log(err)
    })
  }
}
</script>

<style scoped>

</style>
